<template>
  <div>
    <tool-box></tool-box>
    <!-- 商品区域 -->
    <van-checkbox-group v-if="cartList.length !== 0" v-model="result">
      <van-checkbox
        :name="item.product_id"
        v-for="item in cartList"
        :key="item.id"
        @click="changeFn(item)"
        :disabled="isEdit"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="$global.toPrice(item.retail_price)"
            :title="item.name"
            :thumb="item.list_pic_url"
          >
            <template #footer>
              <van-stepper
                v-show="isEdit"
                @change="changStepper(item)"
                v-model="item.number"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="handleDel(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 空状态区域 -->
    <div class="emity" v-else>暂无商品</div>
    <!-- 底部区域 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        v-model="checkedAll"
        @click="changeAll"
        :disabled="disableAll"
        >全选</van-checkbox
      >
      <template #tip>
        累计共{{ cartTotal.checkedGoodsCount }}件商品，可点击
        <van-button
          size="mini"
          @click="isEdit = !isEdit"
          :type="isEdit ? 'danger' : 'primary'"
        >
          {{ !isEdit ? "编辑" : "完成" }}
        </van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  getCartGoodsList,
  setGoodsChecked,
  updateCartGoods,
  delCartGoods
} from '@/api/cart'
export default {
  name: 'cartBar',
  data () {
    return {
      result: [], // 全选
      cartList: [], // 商品列表
      cartTotal: {}, // 商品总量对象
      isEdit: false,
      checkedAll: false
    }
  },
  methods: {
    // 封装赋值方法
    totalFn (obj) {
      this.result = []
      const { cartList, cartTotal } = obj
      this.cartList = cartList
      this.cartTotal = cartTotal
      cartList.forEach((item) => {
        if (item.checked === 1) {
          this.result.push(item.product_id)
        }
      })
      this.checkedAll = this.result.length === this.cartList.length
    },
    // 获取购物车商品列表
    async getCartGoods () {
      const res = await getCartGoodsList()
      this.totalFn(res.data)
    },
    // 更改商品选中状态
    async changeFn (v) {
      const params = {
        isChecked: v.checked === 1 ? 0 : 1,
        productIds: v.product_id + ''
      }
      // 如果是编辑状态  阻止发起请求
      if (this.isEdit) return
      const res = await setGoodsChecked(params)
      this.totalFn(res.data)
    },
    // 全选更改商品状态
    async changeAll (v) {
      const all = this.cartList.map((item) => item.product_id)
      const params = {
        isChecked: this.checkedAll ? 1 : 0,
        productIds: all.join(',')
      }
      // 如果是编辑状态  阻止发起请求
      if (this.disableAll) return
      const res = await setGoodsChecked(params)
      this.totalFn(res.data)
    },
    // 点击了提交
    onSubmit () {
      this.$toast('功能暂未开放')
    },
    // 删除
    handleDel (item) {
      this.$dialog
        .confirm({
          title: '删除商品',
          message: '您确定要删除购物车商品吗'
        })
        .then(() => {
          this.onDelFn(item)
        })
        .catch(() => {
          // on cancel
        })
    },
    async onDelFn (id) {
      const res = await delCartGoods({ productIds: id + '' })
      this.totalFn(res.data)
    },
    // 步进器
    async changStepper (item) {
      const params = {
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }
      const res = await updateCartGoods(params)
      this.totalFn(res.data)
    }
  },
  created () {
    this.getCartGoods()
  },
  computed: {
    disableAll () {
      return this.cartList.length === 0 || this.isEdit
    }
  }
}
</script>

<style lang='less' scoped>
.van-submit-bar {
  bottom: 0.5rem;
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  background-color: #fff;
  padding: 0 0.15rem;
  .van-checkbox {
    padding: 0.1rem 0.01rem;
    border-bottom: 1px solid #ccc;
    .van-card__title {
      font-size: 0.18rem;
      margin-top: 0.1rem;
      height: 0.2rem;
      line-height: 0.2rem;
    }
  }
}
.van-button--square {
  height: 100%;
  border: 0;
}
.emity {
  width: 100%;
  height: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 0.14rem;
  color: #ccc;
}
</style>
